<template>
  <div>
    <div class="balance" @click="showBalanceModal">
      余额：{{ balance }}
    </div>
    <el-dialog :modal="false" title="余额" :visible.sync="balanceModalVisible" >
      余额{{ balance }}
      <el-row>
        <el-col :span="12">
          <img alt="添加好友二维码" :src="puser.add_user_qrcode" style="width: 100%;" />

        </el-col>
        <el-col :span="12">
          <img alt="支付储值二维码" :src="puser.pay_qrcode" style="width: 100%;" />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="balanceModalVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'VabBalance',
  data() {
    return {
      balanceModalVisible: false,
    }
  },
  computed: {
    ...mapGetters({
      balance: 'user/balance',
      puser: 'user/puser',
    }),
  },
  methods: {
    showBalanceModal() {
      console.log(this.puser)
      this.balanceModalVisible = true;
    }
  }
}



</script>

<style lang="scss" scoped>
  @mixin balance {
    color: $base-title-color;
  }

  .balance {
    @include balance;
  }
</style>